<template>
	<view>
		<!-- 定位开始 -->
		<view class="search-view">
			<text class="icon-locationfill i-yellow"></text>
			<text class="search-text">阿里巴巴淘宝城2期西溪园区</text>
			<text>&gt;</text>
		</view>
		<!-- 定位结束 -->
		<!-- 搜索样式开始 -->
		<view class="search-cont">
			<view class="search" @click="search()">
				<text class="icon-search i-grey"></text>
				<input v-model="inputLabel" type="text" placeholder="麻辣烫" disabled/>
			</view>
		</view>
		<!-- 搜索样式结束 -->
		<!-- 轮播开始 -->
		<view class="swiper-view">
			<swiper :autoplay="false" :interval="2000" :duration="1000" @change="bannerfun">
				<block v-for="(tab, index) in tabList" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<block v-for="tabItem in tab" :key="tabItem.id">
								<view class="conteng-img">
									<text class="upload" :class="tabItem.icon"></text>
									<text>{{tabItem.title}}</text>
								</view>
							</block>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<view class="instruct-view">
				<block v-for="(instItem, index) in instructData" :key="index">
					<view class="instruct" :class="{ active: index === num }">
						{{ instItem }}
					</view>
				</block>
			</view>
		</view>
		<!-- 轮播结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputLabel: '',
				instructData: ['', ''],
				num: 0,
				tabList: [
					[
						{
							id: 1,
							'icon': 'icon-icon-shiwu',
							'title': '美食'
						},
						{
							id: 2,
							'icon': 'icon-icon-shiwu',
							'title': '超市便利'
						},
						{
							id: 3,
							'icon': 'icon-icon-shiwu',
							'title': '蔬菜水果'
						},
						{
							id: 4,
							'icon': 'icon-icon-shiwu',
							'title': '美团专送'
						},
						{
							id: 5,
							'icon': 'icon-icon-shiwu',
							'title': '跑院代购'
						},
						{
							id: 6,
							'icon': 'icon-icon-shiwu',
							'title': '夜宵'
						},
						{
							id: 7,
							'icon': 'icon-icon-shiwu',
							'title': '津贴联盟'
						},
						{
							id: 8,
							'icon': 'icon-icon-shiwu',
							'title': '甜点饮品'
						}
					],
					[
						{
							id: 1,
							'icon': 'icon-icon-shiwu',
							'title': '龙虾烧烤'
						},
						{
							id: 2,
							'icon': 'icon-icon-shiwu',
							'title': '甜蜜蛋糕'
						},
						{
							id: 3,
							'icon': 'icon-icon-shiwu',
							'title': ''
						},
						{
							id: 4,
							'icon': 'icon-icon-shiwu',
							'title': '无辣不欢'
						},
						{
							id: 5,
							'icon': 'icon-icon-shiwu',
							'title': '饺子馆'
						},
						{
							id: 6,
							'icon': 'icon-icon-shiwu',
							'title': '小吃馆'
						},
						{
							id: 7,
							'icon': 'icon-icon-shiwu',
							'title': '煲仔饭'
						},
						{
							id: 8,
							'icon': 'icon-icon-shiwu',
							'title': '其他'
						}
					]
				]
			}
		},
		methods: {
			search(){ // 搜索
				uni.navigateTo({
					url: '/pages/Search/index'
				})
			},
			bannerfun (e) { // 轮播图
				this.num = e.detail.current
			}
		}
	}
</script>

<style scoped>
/* @import url("/static/font/iconfont.css"); */
.search-view{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 30upx;
	font-weight: bold;
	height: 80upx;
}
.search-view .i-yellow{
	widows: 35upx;
	height: 35upx;
	color: #ffff00;
}
.search-view .search-text{
	padding: 0 10upx;
}
.search-content{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 70upx;
}
.search-cont .search{
	display: flex;
	flex-direction: flex;
	align-items: center;
	height: 70upx;
	line-height: 70upx;
	width: 100%;
	background-color: #eff3f4;
	border-radius: 10upx;
}
.search .i-grey{
	margin: auto 0 40upx 20upx;
	width: 40upx;
	height: 40upx;
}
.search input{
	height: 70upx;
	line-height: 70upx;
	font-size: 25upx;
	color: #666666;
}
/* 轮播 */
swiper{
	height: 320upx !important;
}
.swiper-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	height: 320upx;
}

.conteng-img{
	width: calc(100% / 5) * 24upx !important;
	margin: 12upx;
	position: relative;
	text-align: center;
}
.conteng-img text{
	padding-top: 20upx;
	font-size: 25upx;
}
.upload {
	width: 70upx;
	height: 70upx;
	border-radius: 50upx;
	display: block;
	margin: 0 auto;
}

.instruct-view{
	display: flex;
	justify-content: center;
	padding-top: 10upx;
}
.instruct{
	background-color: #e6e6e6;
	height: 10upx;
	width: 30upx;
	border-radius: 50upx;
	margin: 0 10upx;
}
.active {
	background-color: #fbae22 !important;
}
</style>
